<template>
	<view class="profile-page">
		<!-- 个人信息头部 -->
		<view class="profile-header">
			<view class="profile-info">
				<image class="profile-avatar"
					src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80"
					mode="aspectFill" />
				<view class="profile-details">
					<text class="profile-name">张小明</text>
					<text class="profile-id">ID: 10086123</text>
				</view>
			</view>
			<!-- 统计卡片 -->
			<view class="profile-card">
				<view class="profile-card-item" v-for="stat in stats" :key="stat.label"
					@click="handleStatClick(stat.label)">
					<text class="profile-stat-value">{{ stat.value }}</text>
					<text class="profile-stat-label">{{ stat.label }}</text>
				</view>
			</view>
		</view>

		<!-- 菜单区域 -->
		<view class="profile-menu">
			<!-- 我的订单 -->
			<view class="menu-card">
				<view class="menu-section-title">我的订单</view>
				<view class="menu-grid">
					<view class="menu-grid-item" v-for="order in orderMenus" :key="order.text"
						@click="navigateToOrder(order.type)">
						<view class="menu-grid-icon">
							<uni-icons :type="order.icon" size="18" color="#e4393c"></uni-icons>
						</view>
						<text class="menu-grid-text">{{ order.text }}</text>
					</view>
				</view>
			</view>

			<!-- 我的服务 -->
			<view class="menu-card">
				<view class="menu-section-title">我的服务</view>
				<view class="menu-item" v-for="service in services" :key="service.text"
					@click="navigateTo(service.path)">
					<view class="menu-item-icon">
						<uni-icons :type="service.icon" size="16" color="#e4393c"></uni-icons>
					</view>
					<text class="menu-item-text">{{ service.text }}</text>
					<uni-icons type="right" size="14" color="#ccc"></uni-icons>
				</view>
			</view>

			<!-- 更多服务 -->
			<view class="menu-card">
				<view class="menu-section-title">更多服务</view>
				<view class="menu-item" v-for="more in moreServices" :key="more.text" @click="navigateTo(more.path)">
					<view class="menu-item-icon">
						<uni-icons :type="more.icon" size="16" color="#e4393c"></uni-icons>
					</view>
					<text class="menu-item-text">{{ more.text }}</text>
					<uni-icons type="right" size="14" color="#ccc"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	// 统计数据
	const stats = ref([{
			label: '收藏',
			value: 32
		},
		{
			label: '关注',
			value: 128
		},
		{
			label: '足迹',
			value: 256
		},
		{
			label: '积分',
			value: 1024
		}
	])

	// 订单菜单
	const orderMenus = ref([{
			icon: 'wallet',
			text: '待付款',
			type: 'unpaid'
		},
		{
			icon: 'paperplane',
			text: '待发货',
			type: 'unshipped'
		},
		{
			icon: 'gift',
			text: '待收货',
			type: 'shipped'
		},
		{
			icon: 'chat',
			text: '待评价',
			type: 'unreviewed'
		},
		{
			icon: 'refresh',
			text: '退款/售后',
			type: 'refund'
		},
		{
			icon: 'list',
			text: '全部订单',
			type: 'all'
		}
	])

	// 服务菜单
	const services = ref([{
			icon: 'wallet',
			text: '我的钱包',
			path: '/subpackage_user/user/wallet'
		},
		{
			icon: 'vip',
			text: '会员中心',
			path: '/subpackage_user/user/membership'
		},
		{
			icon: 'staff',
			text: '推广中心',
			path: '/subpackage_user/user/promotion'
		},
		{
			icon: 'star',
			text: '优惠券',
			path: '/subpackage_user/user/coupons'
		},
		{
			icon: 'location',
			text: '收货地址',
			path: '/subpackage_user/user/address_management'
		},
		{
			icon: 'gift',
			text: '积分兑换',
			path: '/subpackage_user/user/points_exchange'
		},

		{
			icon: 'headphones',
			text: '联系客服',
			path: '/pages/service/index'
		}
	])

	// 更多服务
	const moreServices = ref([{
			icon: 'help',
			text: '帮助中心',
			path: '/subpackage_user/user/help'
		},
		{
			icon: 'info',
			text: '关于我们',
			path: '/subpackage_user/user/about'
		}
	])

	// 导航方法
	const navigateTo = (path) => {
		uni.navigateTo({
			url: path
		})
	}

	const navigateToOrder = (type) => {
		uni.navigateTo({
			url: `/subpackage_order/order/orders?type=${type}`
		})
	}

	const handleStatClick = (label) => {
		let path = ''
		switch (label) {
			case '收藏':
				path = '/subpackage_user/user/favorite'
				break
			case '关注':
				path = '/subpackage_user/user/follow'
				break
			case '足迹':
				path = '/subpackage_user/user/history'
				break
			case '积分':
				path = '/subpackage_user/user/points_exchange'
				break
		}
		if (path) {
			navigateTo(path)
		}
	}
</script>

<style lang="scss" scoped>
	.profile-page {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 20px;
	}

	.profile-header {
		background-color: #ff6a6a;
		padding: 60px 15px 15px;
		border-radius: 0 0 10px 10px;
		color: white;
		position: relative;
		margin-bottom: 40px;

		.profile-settings {
			position: absolute;
			top: 15px;
			right: 15px;
		}

		.profile-info {
			display: flex;
			align-items: center;
			margin-bottom: 30px;

			.profile-avatar {
				width: 60px;
				height: 60px;
				border-radius: 5px;
				margin-right: 15px;
				border: 2px solid rgba(255, 255, 255, 0.5);
			}

			.profile-details {
				display: flex;
				flex-direction: column;

				.profile-name {
					font-size: 18px;
					font-weight: bold;
					margin-bottom: 5px;
				}

				.profile-id {
					font-size: 13px;
					opacity: 0.8;
				}
			}
		}

		.profile-card {
			position: relative;
			margin-bottom: -40px;
			background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%);
			border-radius: 10px;
			padding: 20px 0;
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
			display: flex;
			justify-content: space-around;
			transition: transform 0.3s ease, box-shadow 0.3s ease;

			&:hover {
				transform: translateY(-2px);
				box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
			}

			.profile-card-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0 10px;
				cursor: pointer;
				transition: transform 0.2s ease;

				&:hover {
					transform: scale(1.05);
				}

				.profile-stat-value {
					font-size: 20px;
					font-weight: 600;
					margin-bottom: 8px;
					color: #333;
					background: linear-gradient(45deg, #ff6a6a 0%, #ff8c8c 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				.profile-stat-label {
					font-size: 13px;
					color: #666;
					font-weight: 500;
				}
			}
		}
	}



	.profile-menu {
		padding: 0 15px;
		margin-bottom: 16px;

		.profile-stats {
			background-color: white;
			border-radius: 8px;
			padding: 15px 0;
			margin-bottom: 15px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: space-around;

			.profile-stat-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				flex: 1;

				.profile-stat-value {
					font-size: 16px;
					font-weight: bold;
					margin-bottom: 5px;
					color: #333;
				}

				.profile-stat-label {
					font-size: 12px;
					color: #666;
				}
			}
		}

		.menu-card {
			background-color: white;
			border-radius: 8px;
			overflow: hidden;
			margin-bottom: 15px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

			.menu-section-title {
				padding: 12px 15px;
				font-size: 15px;
				font-weight: bold;
				border-bottom: 1px solid #eee;
			}

			.menu-grid {
				display: grid;
				grid-template-columns: repeat(6, 1fr);
				padding: 15px 0;

				.menu-grid-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 10px 0;

					.menu-grid-icon {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						background-color: rgba(228, 57, 60, 0.1);
						display: flex;
						justify-content: center;
						align-items: center;
						margin-bottom: 8px;
					}

					.menu-grid-text {
						font-size: 12px;
						color: #333;
					}
				}
			}

			.menu-item {
				display: flex;
				align-items: center;
				padding: 15px;
				position: relative;

				&:not(:last-child) {
					border-bottom: 1px solid #eee;
				}

				.menu-item-icon {
					width: 24px;
					height: 24px;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 10px;
				}

				.menu-item-text {
					flex: 1;
					font-size: 14px;
				}
			}
		}
	}
</style>